<template>
	<view>
		<scroll-view id="conter" scroll-y>
			<uni-notice-bar showIcon scrollable single
				text="欢迎来到翻斗大街翻斗花园智慧社区。如有疑问请拨打社区服务热线0909-869652，房地产都归唐琦所有"></uni-notice-bar>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item,index) in imgUrls" :key="index">
					<navigator open-type="navigate"
						:url="'/pages/webview/webview?url=' + encodeURI('http://baidu.com')">
						<image class="banner-swiper-img" :src="item.img"></image>
					</navigator>
				</swiper-item>
			</swiper>
			<view class="top1">
				<view class="navi-services-title">
					<view class="navi-services-title-left">功能服务</view>
					<view class="navi-services-title-right">更多</view>
				</view>
				<view class="navi-services-list">
					<view class="navi-services-list-item">
						<navigator open-type="redirect"  hover-class="none" url="../repair/repair">
							<image src="/static/image/bianjiliebiao.png"></image>
						</navigator>
						<text>物业报修</text>
					</view>
					<view class="navi-services-list-item">
						<navigator open-type="navigate" hover-class="none" url="../interaction/interaction">
							<image src="/static/image/gift.png"></image>
						</navigator>
						<text>社区互动</text>
					</view>
					<view class="navi-services-list-item">
						<navigator open-type="navigate" hover-class="none" url="../owneRoom/owneRoom">
							<image src="/static/image/haoyou.png"></image>
						</navigator>
						<text>业主审核</text>
					</view>
					<view class="navi-services-list-item">
						<navigator open-type="navigate" hover-class="none" url="/miniprogram/pages/repairShow/index">
							<image src="/static/image/car.png"></image>
						</navigator>
						<text>快递通知</text>
					</view>
					<view class="navi-services-list-item">
						<navigator open-type="navigate" hover-class="none" url="/miniprogram/pages/repairShow/index">
							<image src="/static/image/shouye.png"></image>
						</navigator>
						<text>我的房屋</text>
					</view>
				</view>
			</view>
			<!-- 公告通知 -->
			<view class="navi-help">
				<view class="navi-help-notice">
					<view class="navi-help-notice-preimg">
						<image src="/static/image/aaa.png"></image>
					</view>
					<view class="navi-help-notice-cont">
						<view class="navi-help-notice-cont-type">
							<text>温馨提示</text>
						</view>
						<text>疫情期间，做好防护措施，请不要随意外出聚会聚餐</text>
					</view>
					<view class="navi-help-notice-arrowimg"></view>
				</view>
				<view class="common-line"></view>
				<view class="navi-help-list">
					<view class="navi-help-list-guide">
						<view class="navi-help-list-guide-desc">
							<text>新手指引</text>
							<text>快速入手指南</text>
						</view>
						<view class="navi-help-list-guide-img">
							<image src="/static/image/详情.png"></image>
						</view>
					</view>
					<view class="navi-help-list-wy">
						<view class="navi-help-list-wy-desc">
							<text>联系物业</text>
							<text>一键拔号</text>
						</view>
						<view class="navi-help-list-wy-img">
							<image src="/static/image/bbb.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="news">
				<view class="news-head">
					<text>社区新闻</text>
					<view><text>更多精彩</text>
					</view>
				</view>
				<image class="img" src="/static/image/carousel/carousel03.png"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrls: [{
						img: '../../static/image/carousel/carousel01.png'
					},
					{
						img: '../../static/image/carousel/carousel02.png'
					},
					{
						img: '../../static/image/carousel/carousel03.png'
					},
					{
						img: '../../static/image/carousel/carousel04.png'
					}
				]
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
	#conter {
		/* display: flex; */
		/* justify-content: space-around; */
		height: 100%;
		width: 100%;
		background-color: rgb(204, 217, 236);
	}

	.banner-swiper-img {
		width: 100%;
		height: 400rpx;
	}

	.swiper {
		width: 710rpx;
		height: 200px;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 10px;
		/* 设置圆角半径 */
		overflow: hidden;
		/* 隐藏超出轮播图容器的内容 */
	}

	/* swiper image{
  width: 100%;
  height: 200px;
} */
	.top1 {
		width: 710rpx;
		height: 130px;
		margin: auto;
		border-radius: 10px;
		/* 设置圆角半径 */
		overflow: hidden;
		/* 隐藏超出轮播图容器的内容 */
		background-color: white;
	}

	/* 功能服务*/
	.navi-services {
		height: 253rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		border-radius: 12rpx;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(204, 204, 204, 0.2);
	}

	.navi-services-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 24rpx;
	}

	.navi-services-title-left {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
	}

	.navi-services-title-right {
		font-size: 24rpx;
		color: #999;
	}

	.navi-services-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 45rpx;
	}

	.navi-services-list-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.navi-services-list-item image {
		width: 60rpx;
		height: 60rpx;
	}

	.navi-services-list-item text {
		font-size: 26rpx;
	}

	/* 帮助服务开始*/
	.navi-help {
		height: 317rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.2);
		border-radius: 12px;
	}

	.navi-help-notice {
		margin-top: 24rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.navi-help-notice-preimg {
		width: 74rpx;
		height: 36rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.navi-help-notice-preimg image {
		position: relative;
		top: -10px;
		width: 40px;
		height: 40px;
	}

	.navi-help-notice-arrowimg {
		width: 12rpx;
		height: 20rpx;
		margin-left: 5rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.navi-help-notice-cont {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.navi-help-notice-cont text {
		width: 420rpx;
		font-size: 28rpx;
		margin-left: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.navi-help-notice-cont-type {
		width: 94rpx;
		margin-left: 12rpx;
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		background-color: #FFECE3;
		display: flex;
		align-items: center;
		border-radius: 6rpx;
	}

	.navi-help-notice-cont-type text {
		font-size: 18rpx;
		color: #FF6010;
	}

	.common-line {
		width: 330px;
		height: 1rpx;
		background: #EEEEEE;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 24rpx;
	}

	.navi-help-list {
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.navi-help-list-guide {
		width: 308rpx;
		height: 168rpx;
		background: #F5F5F5;
		border-radius: 4px;
		opacity: 0.9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}

	.navi-help-list-guide-desc {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.navi-help-list-guide-desc text:nth-child(1) {
		color: #333;
		font-weight: 600;
		font-size: 30rpx;
	}

	.navi-help-list-guide-desc text:nth-child(2) {
		color: #999;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.navi-help-list-guide-img {
		width: 145rpx;
		height: 103rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.navi-help-list-guide-img image {
		position: relative;
		top: -5px;
		left: 5px;
		width: 60px;
		height: 60px;
	}

	.navi-help-list-wy {
		width: 308rpx;
		height: 168rpx;
		background: #F5F5F5;
		border-radius: 4px;
		opacity: 0.9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}

	.navi-help-list-wy-desc {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.navi-help-list-wy-desc text:nth-child(1) {
		color: #333;
		font-weight: 600;
		font-size: 30rpx;
	}

	.navi-help-list-wy-desc text:nth-child(2) {
		color: #999;
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.navi-help-list-wy-img {
		width: 75rpx;
		height: 138rpx;
		margin-top: 15rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.navi-help-list-wy-img image {
		position: relative;
		top: -10px;
		left: -20px;
		width: 80px;
		height: 80px;
	}

	.news {
		height: 100%;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.2);
		border-radius: 12px;
	}

	.news-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.news-head>text {
		font-size: 34rpx;
		color: #333;
		font-weight: 600;
	}

	.news-head>text {
		font-size: 34rpx;
		color: #333;
		font-weight: 600;
	}

	.news-head>view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.news-head>view text {
		font-size: 24rpx;
		color: #999;
	}

	.img {
		width: 670rpx;
		height: 300rpx;
		margin-top: 10rpx;
		border-radius: 10px;
	}
</style>